<template>
  <div class="permission">
    <div class="permission-beans-info flex-row justify-content-around align-items-center">
      <div>
        <p class="p-30-bolder">{{integral}}</p>
        <p>我的欢乐豆</p>
      </div>
      <div>
        <p class="p-30-bolder">{{quarter_contribution}}</p>
        <p>好友季度贡献值</p>
      </div>
      <div>
        <p class="p-30-bolder">{{total_contribution}}</p>
        <p>好友总贡献值</p>
      </div>
    </div>
    <div class="flex-column align-items-center justify-content-center">
      <div class="title">请选择要开通的权限</div>
      <div
        class="maturity-time"
      >权限到期时间：{{!funInfo[radio1].open?"功能未开通":funInfo[radio1].forever?'永久':funInfo[radio1].endtime}}</div>
    </div>
    <div class>
      <el-radio
        v-for="(item,index) in funInfo"
        :key="index"
        v-model="radio1"
        :label="index"
        border
      >{{item.f_name}}</el-radio>
      <!-- <el-radio v-model="radio1" label="2" border>搜索公式</el-radio> -->
    </div>
    <div class="Grade-box flex-row align-items-center justify-content-center">
      <div
        v-for="(item,index) in funDetail"
        :key="index"
        class="Grade flex-column justify-content-center align-items-center"
      >
        <el-radio
          v-model="priceRadio"
          :label="index"
          border
          :disabled="item.need>integral"
        >{{item.day}}天</el-radio>
        <p>{{item.need}}欢乐豆</p>
      </div>
    </div>
    <div style="margin-top:100px;">
      <el-button
        type="primary"
        shadow="always"
        style="width:240px;"
        :disabled="priceRadio==-1"
        @click="openFeatures"
      >开通</el-button>
    </div>
    <div class="note">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>注意事项</span>
        </div>
        <div class="text item">1.功能开通后才能使用该功能</div>
        <div class="text item">2.欢乐豆不足请联系客服充值</div>
        <div class="text item">3.好友分享下载使用可获得奖励</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      radio1: 0,
      uuid: sessionStorage.getItem('u'),
      integral: 0.00,
      quarter_contribution: 0.00,
      total_contribution: 0.00,
      funInfo: [{ open: false, forever: false, endtime: '' }],
      function_id: 1,
      funDetail: [],
      priceRadio: -1
    }
  },
  computed: {},
  created () {
    this.getUserInfo()
    this.getFunction()
  },
  mounted () {},
  watch: {},
  methods: {
    openFeatures () {
      if (this.priceRadio != -1) {
        this.openFunction()
      }
    },
    getUserInfo () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getUserInfo(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.integral = parseInt(res.data.result.data.integral)
              this.quarter_contribution =
                res.data.result.data.quarter_contribution
              this.total_contribution = res.data.result.data.total_contribution
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    getFunction () {
      let rsaStr = `time=${new Date()}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getFunction(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.funInfo = res.data.result.data
              this.function_id = res.data.result.data[0].id
              this.getFunctionDetail()
            }
          })
          .catch(err => {})
      })
    },
    getFunctionDetail () {
      let rsaStr = `function_id=${this.funInfo[this.radio1].f_id}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getFunctionDetail(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.funDetail = res.data.result.data
              this.priceRadio =
                res.data.result.data[0].need > parseInt(this.integral) ? -1 : 0
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    openFunction () {
      let rsaStr = `power_id=${this.funDetail[this.priceRadio].id}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .openFunction(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.$message({
                message: res.data.errmsg,
                type: 'success'
              })
              this.getUserInfo()
              this.getFunction()
            } else {
              this.$message({
                message: res.data.errmsg,
                type: 'error'
              })
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
